<template>
	<view class="bgPage">
		<view class="title">微信账号绑定</view>
		<view class="label" style="margin-top: 60rpx;">
			<text class="icon cuIcon-mobilefill"></text>
			<input type="text" v-model="phone" placeholder="输入手机号" placeholder-style="color:#cccccc">
		</view>
		<view class="label mi" style="margin-top: 60rpx;">
			<text class="icon cuIcon-picfill"></text>
			<input type="text" v-model="picCode" placeholder="图片验证码" placeholder-style="color:#cccccc">
			<image :src="imgUrl" class="imgCaptcha" @click="imgCaptcha" mode="aspectFit"></image>
		</view>
		<view class="label mi" style="margin-top: 60rpx;">
			<text class="icon cuIcon-phone"></text>
			<input type="number" v-model="phoneValid" placeholder="手机验证码" placeholder-style="color:#cccccc">
			<text :class="'btn-getCaptcha '+(isSend?'disabled':'')" @click="btnSendSMS">{{captchaText}}</text>
		</view>
		<view class="submit" @click="btnSubmit">提交</view>
		<view class="label little">
			<text class="text-gray">使用账号密码登录？</text>
			<a href="javascript:void();" class="text-orange" @click="toLogin()">去登录</a>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				appId:'',
				wxCode:'',
				
				phone:'',
				picCode:'',
				phoneValid:'',
				
				time:'',
				pt:'',
				imgUrl:'',
				isSend:false,
				captchaText:'获取验证码',
			}
		},
		onLoad(option){
			console.log(option)
			let code = this.$utils.getQueryString(location.href,'code');
			if(code){
				//提现微信绑定也跳这里
				let state = this.$utils.getQueryString(location.href,'state');
				if('wallet_wx_add' == state){
					uni.redirectTo({
						 url: '../mine/wallet/way/wxBind?wxCode='+code
					});
				}else{
					this.role = state || '';
					this.appId = this.$store.getters.GET_AppId;
					this.wxCode = code;
					this.imgCaptcha();
				}
			}else{
				let role = option.role;
				let url = window.location.origin + window.location.pathname;
				let appId = this.$store.getters.GET_AppId;
				url = encodeURIComponent(url);
				if(role){
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId
						+'&redirect_uri='+url
						+'&response_type=code&scope=snsapi_userinfo'
						+'&state='+role+'#wechat_redirect';
				}else{
					window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appId
						+'&redirect_uri='+url
						+'&response_type=code&scope=snsapi_userinfo'
						+'#wechat_redirect';
				}
			}
		},
		methods: {
			//图片验证码初始化
			imgCaptcha(){
				this.time = Math.round(new Date());
				const httpDomain = this.$store.getters.GET_httpDomain;
				const baseURL = this.$store.state.baseURL;
				this.imgUrl = httpDomain+baseURL+"/api/v1/verifyCode.jpeg?w=300&h=80&t="+this.time;
			},
			btnSendSMS(){
				if(this.isSend)return
				if(!this.phone){
					uni.showModal({
						title:'温馨提示',
						content:'请输入手机号',
						showCancel:false
					})
					return
				}
				if(!this.picCode){
					uni.showModal({
						title:'温馨提示',
						content:'请输入图片验证码',
						showCancel:false
					})
					return
				}
				
				this.pt = Math.round(new Date());
				const api = this.$request;
				const _self = this;
				api.post(api.url.sendSMS,{
					phone:this.phone,
					code:this.picCode,
					pt:this.pt,
					t:this.time
				},res=>{
					if(res.code == 200){
						_self.isSend = true;
						let number = 60;
						_self.captchaText = number--;
						_self.captchaText = _self.captchaText + '秒';
						let timer = setInterval(()=>{
							_self.captchaText = number--;
							_self.captchaText = _self.captchaText + '秒';
							if(number<=0){
								clearInterval(timer);
								_self.isSend = false;
								_self.captchaText = '获取验证码';
							}
						},1000)
					}else if(res.msg){
						uni.showToast({
							title:res.msg,
							icon:'error'
						})
						_self.imgCaptcha();
					}else {
						uni.showToast({
							title:'发送短信失败',
							icon:'error'
						})
						_self.imgCaptcha();
					}
				})
			},
			btnSubmit(){
				if(!this.phone){
					uni.showModal({
						title:'温馨提示',
						content:'请输入手机号',
						showCancel:false
					})
					return
				}
				if(!this.phoneValid){
					uni.showModal({
						title:'温馨提示',
						content:'请输入手机验证码',
						showCancel:false
					})
					return
				}
				const httpDomain = this.$store.getters.GET_httpDomain;
				const api = this.$request;
				const _self = this;
				api.post(api.url.wxBind,{
					phone:this.phone,
					phoneValid:this.phoneValid,
					appId:this.appId,
					wxCode:this.wxCode,
					pt:this.pt,
					role:this.role
				},res=>{
					if(res.code==200 && res.body.token){
						_self.$store.commit('SET_userInfo',res.body);
						window.location.href = httpDomain+'/#/pages/agent/index'
					}else if(res.msg){
						uni.showModal({
							title:'绑定失败',
							content:res.msg,
							showCancel:false,
							confirmText:'使用账号密码登录',
							success(m) {
								uni.reLaunch({
									 url: './login?role='+_self.role
								});
							}
						})
					}else{
						uni.showToast({
							title:'绑定失败',
							icon:'error'
						})
					}
				})
			},
			toLogin:function(){
				uni.reLaunch({
					 url: './login?role='+this.role
				});
			}
		}
	}
</script>

<style lang="less">
	.bgPage{
		width: 100vw;
		height: 100vh;
		background-color: white;
		padding-top: 100rpx;
		.bgImg{
			width: 600rpx;
			height: 600rpx;
			display: block;
			margin: 0rpx auto 180rpx;
		}
		.txt{
			text-align: center;
			color: #999;
			font-size: 32rpx;
			&.deep{
				font-size: 40rpx;
				color: #3d4aa9;
				font-weight: 600;
				margin-bottom: 28rpx;
			}
		}
		.title{
			display: block;
			margin: 0rpx auto 40rpx;
			width: 70%;
			height: 100rpx;
			font-size: 48rpx;
			font-weight: 600;
			color:#333333;
		}
		.label{
			width: 70%;
			height: 53rpx;
			margin: 0 auto 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 100;
			.icon{
				font-size: 44rpx;
				margin-right: 20rpx;
				color: #ff813b;
			}
			input{
				width: 100%;
				height: 100%;
				border-bottom: 1rpx solid #CCCCCC;
			}
			.btn-getCaptcha{ 
				background:#fc8a65;color:#fff; font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
			.imgCaptcha{font-size: 26rpx; width: 193rpx; height: 53rpx; line-height: 53rpx; text-align: center;}
			.disabled{ background: #d0d0d0;}
			&.mi{
				input{
					width: 50%;
				}
			}
			&.little{
				width: 60%;
				margin-top: 32rpx;
				justify-content: space-between;
				color: #ff813b;
			}
		}
		.submit{
			margin: 100rpx auto 0;
			width: 70%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius:10rpx;
			background:linear-gradient(90deg,#f4b349,#ec7136);
			color: #FFFFFF;
		}
		image.but{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 10;
		}
	}
</style>
